<template>
  <div class="car" id="cart">
    <div class="topbar">
      <van-nav-bar
        title="购物车"
        right-text="删除"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
      />
    </div>

    <div class="cartList">
      <div class="navs">
        <van-empty description="暂无数据" v-if="isCart" />
        <label for="check" v-else>
          <input type="checkbox" id="check" v-model="checkAll" />全选<span
            >总价：{{ sumPrice.toFixed(2) }}</span
          ></label
        >
        <div>
          <van-card
            v-for="item in Carts"
            :key="item.id"
            :price="item.product.price.toFixed(2)"
            :title="item.product.name"
            :thumb="item.product.coverImage | dalImg"
          >
            <template #tag>
              <input class="radio" type="checkbox" v-model="item.chk" />
            </template>
            <template #price-top>
              <p style="text-decoration: line-through">
                {{ (item.product.price * 1.4).toFixed(2) }}
              </p>
            </template>

            <template #tags>
              <p style="margin-top: 10px"></p>
              <van-tag plain type="danger" class="tags"> 特价</van-tag>
              <van-tag plain type="danger"
                ><span style="color: gray">24H发货</span></van-tag
              >
            </template>
            <template #footer>
              <van-button
                icon="minus"
                type="primary"
                size="mini"
                @click="ResAmount(item.product.id, -1)"
              />
              <input
                type="text"
                value="1"
                min="1"
                v-model="item.amount"
                class="text1"
              />
              <van-button
                icon="plus"
                type="primary"
                size="mini"
                @click="ResAmount(item.product.id, 1)"
              ></van-button>
            </template>
          </van-card>
        </div>
      </div>
    </div>
    <div class="recommend">
      <div
        style="background-color: #f5f5f5; text-align: center; padding: 0.6rem"
      >
        <h5 style="color: #0eb6ff">推荐</h5>
      </div>
      <div class="app-auto">
        <router-link
          :to="{ name: 'Detail', params: { id: item.id } }"
          class="ap-item"
          v-for="item in recommend"
          :key="item.id"
          style="color: black"
        >
          <van-image fit="cover" :src="item.coverImage | dalImg" />
          <p>{{ item.name }}</p>
          <p>
            <span style="margin-right: 10px"
              ><span style="color: red"
                >￥{{ item.price ? item.price : "" }}</span
              >/箱</span
            >
            <span class="cart"
              ><van-icon name="shopping-cart-o" color="white" />
            </span>
          </p>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { loadCartsAPI, addCartAPI, delCartAPI } from "../services/carts";
import { loadProductsAPI } from "../services/products";
export default {
  data() {
    return {
      // checkbox: false,
      // checkboxGroup: [],
      isCart: true,
      Carts: [],
      recommend: [],
      amount: "",
    };
  },
  created() {
    //
    this.loadCartList();
    loadProductsAPI().then((res) => {
      console.log(res.data);
      this.recommend = res.data;
    });
  },
  methods: {
    loadCartList() {
      loadCartsAPI().then((res) => {
        console.log(res.data);
        this.Carts = res.data.map((item) => ({ ...item, chk: false }));
        if (res.data.length == 0) {
          this.isCart = true;
        } else {
          this.isCart = false;
        }
      });
    },
    onClickRight() {
      // delCartAPI();
      const idArr = [];
      this.Carts.forEach((item) => {
        if (item.chk == true) {
          idArr.push(item.id);
        }
      });
      console.log(idArr);
      idArr.forEach((item) => {
        console.log(item);
        delCartAPI(item).then((res) => {
          console.log(res.msg);
          this.loadCartList();
        });
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    ResAmount(product, num) {
      // console.log(product);
      // console.log(num);
      addCartAPI(product, num).then((res) => {
        console.log(res);

        //重新渲染页面
        this.loadCartList();
      });
    },
  },
  computed: {
    checkAll: {
      set(v) {
        this.Carts.forEach((item) => (item.chk = v));
      },
      get() {
        return this.Carts.every((item) => item.chk);
      },
    },
    sumPrice() {
      return this.Carts.filter((item) => item.chk).reduce(
        (pre, cur) => pre + cur.amount * cur.product.price,
        0
      );
    },
  },
};
</script>

<style scoped lang="scss">
.topbar .van-nav-bar {
  background-color: #0eb6ff;
}
.cartList {
  padding: 10px;
  background-color: #f5f5f5;
}
.navs {
  background-color: #fff;
  label {
    margin-left: 30px;
    display: block;
  }
  .radio {
    margin-top: 0px;
    margin-right: 20px;
    margin-left: -12px;
  }
  .text1 {
    width: 40px;
    height: 24px;
    margin-left: 5px;
    margin-top: 5px;
    vertical-align: middle;
  }
}
.app-auto {
  background-color: #f5f5f5;
  // width: 200%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding-bottom: 2rem;
  .ap-item {
    border-radius: 10px;
    margin-top: 10px;
    background-color: #fff;
    width: 46vw;
    padding: 10px;
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cart {
      display: inline-block;
      text-align: center;
      width: 20px;
      height: 20px;
      border-radius: 30px;
      background-color: #0eb6ff;
    }
  }
}
</style>
